<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@page import="javax.xml.parsers.DocumentBuilder"%>
<%@page import="javax.xml.parsers.DocumentBuilderFactory"%>
<%@page import="java.util.ArrayList"%>
<%@page import="model.bean.Dictionary"%>

<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@taglib uri="/WEB-INF/taglib139.tld" prefix="pg" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html>
<head>

<title>Mathematic Dictionary</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<title>Tra từ điển toán học Online | Từ điển toán học đa ngôn ngữ | tra tu dien toan online</title>
<meta name="description"
	content="Từ điển toán học online, từ điển toán học đa ngôn ngữ online, tra tu điển toán online"></meta>
<meta name="keywords"
	content="Từ điển toán, tu dien toan, từ điển toán học online, math dictionary, tra tu dien toan online"></meta>
<meta name="robots" content="index, follow" />
<meta name="geo.region" content="VN" />
<link rel="shortcut icon" type="image/ico" href="./img/MDM.png" />
<link rel="stylesheet" type="text/css" href="./css/mycss.css" />
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="./css/dataTables.editor.css" />


<%--
<OBJECT ID=MathPlayer CLASSID="clsid:32F66A20-7614-11D4-BD11-00104BD3F987"></OBJECT>
<?IMPORT NAMESPACE="g" IMPLEMENTATION="#MathPlayer"?> --%>

<script type="text/javascript" charset="utf-8" src="script/jquery-1.9.1.js"></script>
<script type="text/javascript" charset="utf-8" src="script/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="script/homeScript.js"></script>

<%-- Phân trang --%>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#example').dataTable({
			"sPaginationType" : "full_numbers"
		});
	});
</script>

<%-- highlight khi dòng được click chọn --%>
<style type="text/css">
.row-highlight {
	background-color: #E0FFFF;
}
</style>

<%-- Xử lý sự kiện click chuột để lấy dữ liệu --%>
<!-- <script type="text/javascript">
	$(function() {
		var message = $('#message');
		var tr = $('#example').find('tr');
		//tr.bind('click', function(event) {
			//$("#example tbody tr").click( function( e ) {
			$("#example").on("click","tbody tr", function (event) {
			var values = '';
			tr.removeClass('row-highlight');
			var tds = $(this).addClass('row-highlight').find('td');
			$.each(tds, function(index, item) {
				values = values + 'word' + (index + 1) + ':' + item.innerHTML + '<br/>';
			});
			message.html(values);

		});
	});
</script> -->

<%--Script hiển thị công thức toán học trên web với thư viện MathAjax --%>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


</head>

<body>
	<div id="wrapper" class="hfeed">
		<div id="header">
			<div id="masthead">
				<div >
					<a ><html:link action="/Home"><img border="0"
						src="./img/logoMathDict.png" 
						title="Logo Từ điển toán học đa ngôn ngữ online" />
						</html:link>
						</a>

					<div id="site-description">Tra từ điển toán học trực tuyến</div>

				</div>
				<!-- #branding -->


				<div id="access">
					<div class="menu-header">
						<ul id="menu-main" class="menu">
							<li id="menu-item-6"
								class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6">
								<a title="Giới thiệu về trang web"> <html:link
										action="/Home">Trang chủ</html:link></a>
							</li>
							<li id="menu-item-5"
								class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-Home menu-item-5">
								<a title="Tra từ điển toán Online"> <html:link
										action="/SearchForm">Tra từ điển toán Online</html:link></a>
							</li>
							<li id="menu-item-10"
								class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10">
								<a title="Tham gia đánh giá, góp ý"><html:link
										action="/blog">Thảo luận</html:link></a>
							</li>

							<%
								String groupId = (String) session.getAttribute("groupId");
									if ("1".equals(groupId)) {
										String display = "";
							%>
							<li id="menu-item-4" style = "display: ${display};"
								class="menu-item-4">
								<a title="Tham gia đánh giá, góp ý"><html:link
										action="/wordManager">Quản lý từ điển</html:link></a>
							</li>
							<%
								}
							%>
						</ul>
						<%
						String userName = (String) session.getAttribute("userName");
						if ((userName == "")
								|| userName == null) {
						%>
							<div id = "boxLogin" class="boxLogin">
								<input title="Tên đăng nhập"
									style="width: 90px; padding: 1px" name="userName" type="text" id = "userName"/>
									<input title="Mật khẩu" style="width: 90px; padding: 1px"
									name="password" type="password" id = "password"/>
								
								<html:submit property="login" value="Đăng nhập"
										style="font-size: 13px; width: 80px;padding: 1px" onclick = "logIn();"></html:submit>
								
								<html:submit property="registry" value="Đăng ký" onclick="location.href='http://localhost:8080/MathDict/Registration.jsp'; "
										style="font-size: 13px; width: 80px;padding: 1px;">
										<a href = "http://localhost:8080/MathDict/Registration.jsp"></a>
								</html:submit>
							</div>
							
							<div id = "boxWelcome" style = "display: none;" class = "welcome">
								<p>Xin chào: <span id = "welcomeName"></span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i><label style="color: red;" onclick = "logOut1();">Thoát</label></i></p>
							</div>
						<%
						} else {
						%>
							<div id = "boxWelcome2" class = "welcome" style = "display:'';">
								<p>Xin chào: <%=userName %> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i><label style="color: red;" onclick = "logOut2();">Thoát</label></i></p>
								
							</div>
							<div id = "boxLogin" class="boxLogin" style = "display: none;">
								<input title="Tên đăng nhập"
									style="width: 100px; padding: 1px" name="userName" type="text" id = "userName"/>
									<input title="Mật khẩu" style="width: 100px; padding: 1px"
									name="password" type="password" id = "password"/>
								
								<html:submit property="login" value="Đăng nhập"
										style="font-size: 12.5px; width: 75px;padding: 1px" onclick = "logIn();"></html:submit>
								
								<html:submit property="registry" value="Đăng ký" onclick="location.href='http://localhost:8080/MathDict/Registration.jsp'; "
										style="font-size: 12.5px; width: 70px;padding: 1px;">
										<a href = "http://localhost:8080/MathDict/Registration.jsp"></a>
								</html:submit>
							</div>
							<div id = "boxWelcome" style = "display: none;" class = "welcome">
								<p>Xin chào: <span id = "welcomeName"></span>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i><label style="color: red;" onclick = "logOut1();">Thoát</label></i></p>
							</div>
						<%
						}
						%>
					</div>
				</div>
				<!-- #access -->
			</div>
			<!-- #masthead -->
		</div>
		<!-- #header -->
		
		<div id="main">
				<!-- #content -->

				<div align="center">
					<h1>Mathematic dictionary Multilanguage</h1>
					<html:form  action="/SearchGUI">
						<br> 
						<label for="source">Ngôn ngữ nhập: </label> 
							<html:select property="langSource" style="width: 120px;">
							<logic:iterate id="list" name="listLang" >
								<html:option value="${list.langId }">${list.langName }</html:option>
							</logic:iterate>
							</html:select>&nbsp;&nbsp;&nbsp;
						
						<label for="target">Ngôn ngữ tra cứu: </label>
						<html:select property="langTarget"  style="width: 120px;">
							<logic:iterate id="list" name="listLang" >
								<html:option value="${list.langId }">${list.langName }</html:option>
							</logic:iterate>
						</html:select>
						<br>
						<p>&nbsp;</p>
					<div align="center" style="font-family: utf-8">
							<label style="font-size: 18">Nhập nội dung cần tra:</label>&nbsp;<html:text property="searchItem" style="width: 600px;" maxlength="100"/>&nbsp; 
							<input type="submit" name = "btnSearch" value="search" style = "width: 70; height: 25" >
					</div>
					</html:form>
				</div>
				<br /> 
					<html:link action="/SearchGUI" style="font-size : 14">Tất cả
							<html:param name="startWith">All</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">A
							<html:param name="startWith">A</html:param>
					</html:link>&nbsp;&nbsp;&nbsp; 
					<html:link action="/SearchGUI" style="font-size : 14">B
							<html:param name="startWith">B</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">C
							<html:param name="startWith">C</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">D
							<html:param name="startWith">D</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">E
							<html:param name="startWith">E</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">F
							<html:param name="startWith">F</html:param>
					</html:link>&nbsp;&nbsp;&nbsp; 
					<html:link action="/SearchGUI" style="font-size : 14">G
							<html:param name="startWith">G</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">H
							<html:param name="startWith">H</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">I
							<html:param name="startWith">I</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">J
							<html:param name="startWith">J</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">K
							<html:param name="startWith">K</html:param>
					</html:link>&nbsp;&nbsp;&nbsp; 
					<html:link action="/SearchGUI" style="font-size : 14">L
							<html:param name="startWith">L</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">M
							<html:param name="startWith">M</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">N
							<html:param name="startWith">N</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">O
							<html:param name="startWith">O</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">P
							<html:param name="startWith">P</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">Q
							<html:param name="startWith">Q</html:param>
					</html:link>&nbsp;&nbsp;&nbsp; 
					<html:link action="/SearchGUI" style="font-size : 14">R
							<html:param name="startWith">R</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">S
							<html:param name="startWith">S</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">T
							<html:param name="startWith">T</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">U
							<html:param name="startWith">U</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">V
							<html:param name="startWith">V</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">W
							<html:param name="startWith">W</html:param>
					</html:link>&nbsp;&nbsp;&nbsp; 
					<html:link action="/SearchGUI" style="font-size : 14">X
							<html:param name="startWith">X</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">Y
							<html:param name="startWith">Y</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
					<html:link action="/SearchGUI" style="font-size : 14">Z
							<html:param name="startWith">Z</html:param>
					</html:link>&nbsp;&nbsp;&nbsp;
				<br/>
				<hr style="width: 100%; height: 2px;">

			
	<%--Hiển thị danh sách từ được đọc từ file từ điển --%>
							<%
									if ("1".equals(groupId)) {
							%>
							<input type = "button" id="btnDelete" value ="Delete"
								class="menu-item-4" onclick="Delete();">
							<%
								}
							%>
			<div id="dataForm" style="display: ">
				<table cellpadding="0" cellspacing="0" border="0" class="display"
					id="example">
					<thead>
						<tr>
							<td><h2 style="color: black;">Danh sách kết quả:</h2></td>
						</tr>
					</thead>
					
					<tbody>
						<%
							ArrayList<Dictionary> listWord = new ArrayList<Dictionary>();
								listWord = (ArrayList<Dictionary>) request.getAttribute("listWord");
								/* String strTotalPages = String.valueOf(request.getAttribute("totalPages"));
								String strPageCurrent = String.valueOf(request.getAttribute("pageCurrent")); */

								String img = null;// Đường dẫn chứa file ảnh minh họa
								if (listWord.size() > 0) {
									for (int i = 0; i < listWord.size(); i++) {
										img = listWord.get(i).getImg();
						%>
						<tr>
							<td><br />
							<strong style="color: blue;"><%=listWord.get(i).getWord()%></strong>&nbsp;<br />&nbsp;<i><%=listWord.get(i).getMeaning()%></i>
								&nbsp; 
							<%
 								if (!("not".equals(img))) {
 							%> 
						 	<br>
							<img alt="" src="./img/<%=img%>"> 
							<%
 								}
 							%>
						 	</td>
						</tr>
						<%
							}
								}
						%>
						<tr>
							<td><br /></td>
						</tr>
					</tbody>
				</table>

				<br />
				<div id="message"></div>
				<br /> <br />
			</div>


			<!-- #container -->
		<%--Kết thúc danh sách từ --%>	

		</div>
		<!-- #main -->

<%--Phần nội dung footer --%>

		<div id="footer" >
			<div id="colophon">
				<div id="site-info">
					<a  title="Trang giới thiệu" rel="Home"> <html:link action="/Home">Từ điển toán học online | Mathematic dictionary Multilanguage</html:link> </a>
					<br />
				</div>
				<!-- #site-info -->

			</div>
			<!-- #colophon -->
		</div>
		<!-- #footer -->
</div>
	<!-- #wrapper -->

</body>
</html:html>